<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <!--360 browser -->
    <meta name="renderer" content="webkit">
    <meta name="author" content="wos">
    <!-- Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="images/i/app.png">
    <!--Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="images/i/app.png">
    <!--Win8 or 10 -->
    <meta name="msapplication-TileImage" content="images/i/app.png">
    <meta name="msapplication-TileColor" content="#e1652f">

    <link rel="icon" type="image/png" href="images/i/favicon.png">
    <link rel="stylesheet" href="{$Think.const.COMMON_URL}/Css/amazeui.min.css">
    <link rel="stylesheet" href="__CSS__/public.css">

    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="{$Think.const.COMMON_URL}/Js/jquery.min.js"></script>
    <!--<![endif]-->
    <!--[if lte IE 8 ]>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
    <script src="$Think.const.COMMON_URL}/js/amazeui.ie8polyfill.min.js"></script>
    <![endif]-->
    <script src="{$Think.const.COMMON_URL}/Js/amazeui.min.js"></script>
    <script src="__JS__/public.js"></script>
</head>
<body>
<style type="text/css">
    body{
        background-color: white;
    }
    .price-box {
        margin:10px;
    }
    .banner {
        margin-top:0 !important;
    }



    .am-topbar {
        background-color:#FC605A;
    }
    .zjq-table {
        background-color:white;
    }
   .zjq-table th,.zjq-table td{
       text-align: center;
   }
    .attr-list-hd, .after-market-hd {
        height: 35px;
        padding-top: 20px;
    }
    .clear {
        clear: both;
    }
    .J_Brand {
        background-color:white;
        padding:8px;
    }
    .details {
        padding:8px;
    }
    .attr-list-hd h4 {
        position: relative;
        float: left;
        height: 35px;
        margin-bottom: -1px;
        padding-right: 10px;
        border-bottom: 1px solid #F70;
        font-size: 14px;
    }
    ul#J_AttrUL {
        padding: 0px 20px 18px;
        text-indent: 0px;
        text-align: left;
        overflow: hidden;
    }
    ul#J_AttrUL li {
        float: left;
        width: 100%;
        height: 18px;
        overflow: hidden;
        margin: 10px 0px 0px 0px;
        line-height: 18px;
        vertical-align: top;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #666;
        font-size: 14px;
        list-style: none;
    }
    .twlistNews {
        padding-top: 40px;
    }
    img{
        width:100%;
        vertical-align: middle;
    }

    .rent-one-box{
        border-bottom: 1px solid #89d7ff;
    }

    .rent-two-box{
        border-bottom: 1px solid #89d7ff;
    }

    .price-color {
        color:#f5567c;
    }

    .price-case {
        padding-bottom: 10px;
    }
    .rent-style {
        padding-bottom: 10px;
    }
    .rent-price {
        padding-bottom: 10px;
    }
    .rent-checkbox {
        padding-bottom:10px;
    }

    .rent-checkbox input{
        display:inline-block;
        padding-left:10px;
    }

</style>

<header class="am-topbar am-topbar-fixed-top wos-header">
    <div class="am-container">
        <h1 class="am-topbar-brand">
            <a href="#" style="color:white">镭峰出行</a>
        </h1>

        <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-warning am-show-sm-only"
                data-am-collapse="{target: '#collapse-head'}">
            <span class="am-sr-only">导航切换</span>
            <span class="am-icon-bars"></span>
        </button>

        <div class="am-collapse am-topbar-collapse" id="collapse-head">
            <ul class="am-nav am-nav-pills am-topbar-nav">
                <li><a href="index.html">首页</a></li>
                <li><a href="#">资讯</a></li>
                <li><a href="#">专栏</a></li>
                <li class="am-dropdown" data-am-dropdown>
                    <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                        案例 <span class="am-icon-caret-down"></span>
                    </a>
                    <ul class="am-dropdown-content">
                        <li class="am-dropdown-header">案例</li>
                        <li><a href="#">1. 游戏案例</a></li>
                        <li><a href="#">2. 营销案例</a></li>
                        <li><a href="#">3. 工具案例</a></li>
                    </ul>
                </li>
                <li class="am-active"><a href="#">评测</a></li>
                <li><a href="#">活动</a></li>
            </ul>

            <div class="am-topbar-right">
                <button class="am-btn am-btn-default am-topbar-btn am-btn-sm"><span class="am-icon-pencil"></span>注册</button>
            </div>

            <div class="am-topbar-right">
                <button class="am-btn am-btn-danger am-topbar-btn am-btn-sm"><span class="am-icon-user"></span> 登录</button>
            </div>
        </div>
    </div>
</header>
<!--banner-->
    <div class="banner">
        <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}' >
            <ul class="am-slides">
                <li>
                    <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">

                </li>
                <li>
                    <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">

                </li>
                <li>
                    <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">

                </li>
                <li>
                    <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">

                </li>
            </ul>
        </div>

    </div>
    <div class="price-box">
        <div class="price-case">
            <span>米字蓝小龟</span><span>|已经租出12辆</span>
        </div>
        <div class="rent-one-box">
            <div class="rent-style">租赁方式一：在租车时进行付款</div>
            <div class="rent-price">租金：<span class="price-color">￥500</span></div>
            <div class="rent-checkbox"><input  type="checkbox"/>一天&nbsp;<input  type="checkbox"/>一周&nbsp;<input  type="checkbox"/>半月&nbsp;<input  type="checkbox"/>一个月</div>
        </div>
        <div class="rent-two-box">
            <div class="rent-style">租赁方式二：推广价格</div>
            <div class="rent-price">
                <div style="float:right;">租金：<span class="price-color">￥500</span></div>
                <div id="doc-dropdown-justify" >
                    <div class="am-dropdown" data-am-dropdown="{justify: '#doc-dropdown-justify'}">
                        <button class="am-btn am-btn-success am-radius am-dropdown-toggle am-btn-sm">推广价格介绍 <span class="am-icon-caret-down"></span></button>
                        <div class="am-dropdown-content">
                            <h2>关于推广价格介绍</h2>
                            <p>
                                用户在用自己的推广二维码邀请好友关注镭峰出行平台：
                                对于月租用户能够邀请5个每个减4元 每天签到每次减0.5元每月限30次
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="am-vertical-align" style="height: 40px;">
                <span class="am-vertical-align-middle" style="overflow:hidden;display:inline-block;">租赁时长</span>
                <span class="am-vertical-align-middle" style="overflow:hidden;float:right;margin-left:10px;">天</span>

                <div class="am-vertical-align-middle" style="overflow:hidden;float:right;">
                    <form class="am-form-inline" role="form">
                        <button type="button" class="am-btn am-btn-default" style="float:left" onClick="subtractQty();" ><i class="am-icon-minus"></i></button>
                        <input type="number" name="txtQty" id="txtQty" class="am-form-field txt-qty am-text-center am-text-sm" value="1" style=" width:60px; margin-right:0px; height:37px; display:inline; float:left">
                        <button type="button" class="am-btn am-btn-default" style="float:left" onClick="addQty();"><i class="am-icon-plus"></i></button>
                    </form>
                </div>
            </div>

        </div>
    </div>




<div class="am-g">

    <div class="am-tab-panel am-fade am-in am-active">

        <!-- 商品详情 -->

        <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
            <ul class="am-tabs-nav am-cf">
                <li class="am-active">
                    <a href="[data-tab-panel-0]">详情</a>
                </li>
                <li class="">
                    <a href="[data-tab-panel-1]">交易记录</a>
                </li>
                <li class="">
                    <a href="[data-tab-panel-2]">评价</a>
                </li>
            </ul>
            <div class="am-tabs-bd">
                <div data-tab-panel-0 class="am-tab-panel am-active">
                    <div class="J_Brand">
                        <div class="attr-list-hd tm-clear">
                            <h4>产品参数：</h4></div>
                        <div class="clear"></div>
                        <ul id="J_AttrUL">
                            <li title="">产品类型:&nbsp;烘炒类</li>
                            <li title="">原料产地:&nbsp;巴基斯坦</li>
                            <li title="">产地:&nbsp;湖北省武汉市</li>
                            <li title="">配料表:&nbsp;进口松子、食用盐</li>
                            <li title="">产品规格:&nbsp;210g</li>
                            <li title="">保质期:&nbsp;180天</li>
                            <li title="">产品标准号:&nbsp;GB/T 22165</li>
                            <li title="">生产许可证编号：&nbsp;QS4201 1801 0226</li>
                            <li title="">储存方法：&nbsp;请放置于常温、阴凉、通风、干燥处保存 </li>
                            <li title="">食用方法：&nbsp;开袋去壳即食</li>
                        </ul>
                        <div class="clear"></div>
                    </div>

                    <table class="am-table am-table-bordered am-table-radius zjq-table">
                        <thead>
                        <tr><th>租赁时间</th><th>租赁价格</th></tr>
                        </thead>
                        <tbody>
                        <tr><td>1天</td><td>30元</td></tr>
                        <tr><td>一周</td><td>100元</td></tr>
                        <tr><td>半月</td><td>150</td></tr>
                        <tr><td>一个月</td><td>220元</td></tr>
                        </tbody>
                    </table>
                </div>
                <div data-tab-panel-1 class="am-tab-panel ">

                    <ul class="am-list am-list-static am-list-border am-list-striped am-text-sm">
                        <li>XXX于2015-6-5日购买成功</li>
                        <li>XXX于2015-6-5日购买成功</li>
                        <li>XXX于2015-6-5日购买成功</li>
                        <li>XXX于2015-6-5日购买成功</li>
                        <li>XXX于2015-6-5日购买成功</li>
                        <li>XXX于2015-6-5日购买成功</li>
                    </ul>

                </div>
                <div data-tab-panel-2 class="am-tab-panel ">
                    <div class="am-cf am-padding-sm" >
                        <ul class="am-comments-list am-comments-list-flip">
                            <li class="am-comment">
                                <a href="">
                                    <img class="am-comment-avatar" src="default/img1.jpg" alt=""/> <!-- 头像 -->
                                </a>

                                <div class="am-comment-main">
                                    <header class="am-comment-hd">
                                        <div class="am-comment-meta">
                                            <a href="#link-to-user" class="am-comment-author">昵称</a>（他的用户名）
                                            <time datetime="2013-07-27T04:54:29-07:00" title="最后的通信时间" class="am-fr">2014-7-12 15:30</time>
                                        </div>
                                    </header>
                                    <div class="am-comment-bd am-text-sm">
                                        那，那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。
                                    </div>
                                </div>
                            </li>
                            <li class="am-comment">
                                <a href="">
                                    <img class="am-comment-avatar" src="default/img1.jpg" alt=""/> <!-- 头像 -->
                                </a>

                                <div class="am-comment-main">
                                    <header class="am-comment-hd">
                                        <div class="am-comment-meta">
                                            <a href="#link-to-user" class="am-comment-author">昵称</a>（他的用户名）
                                            <time datetime="2013-07-27T04:54:29-07:00" title="最后的通信时间" class="am-fr">2014-7-12 15:30</time>
                                        </div>
                                    </header>
                                    <div class="am-comment-bd am-text-sm">
                                        其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？
                                    </div
                                    ></div>
                            </li>
                            <li class="am-comment"><!-- 头像显示在右手边 am-comment-flip -->
                                <a href="">
                                    <img class="am-comment-avatar" src="default/img1.jpg" alt=""/> <!-- 头像 -->
                                </a>

                                <div class="am-comment-main">
                                    <header class="am-comment-hd">
                                        <div class="am-comment-meta">
                                            <a href="#link-to-user" class="am-comment-author">昵称</a>（他的用户名）
                                            <time datetime="2013-07-27T04:54:29-07:00" title="最后的通信时间" class="am-fr">2014-7-12 15:30</time>
                                        </div>
                                    </header>
                                    <div class="am-comment-bd  am-text-sm">
                                        She's gone 我早知道
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>

    </div>

</div>

<a class="am-btn am-btn-danger" href="" target="_blank" style="width:100%;height:40px;position:fixed;z-index: 999;bottom: 0">立即下单</a>

<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
    <a href="#top" title="回到顶部">
        <span class="am-gotop-title">回到顶部</span>
        <i class="am-gotop-icon am-icon-chevron-up"></i>
    </a>
</div>

</body>
</html>